function func_six(){
    $.ajax({
            url: '/ajax-sys-data',
            dataType: 'json',
            success: function(datas) {
                // 显示数据
                var dstr = "<table class='am-table'><thead><tr><th>名称</th><th>信息</th></tr></thead><tbody>";
                
                for(var i in datas){
                    dstr = dstr +"<tr class='am-primary'><td>"+i+"</td><td>"+datas[i]+"</td></tr>";
                }
                    
                dstr = dstr + "</tbody></table>";
                $('.main-six').html(dstr);
            }
       });
}


function func_two(){
    var strtwo = "<div><span>CPU使用情况</span></div>"+
        "<canvas id='canvas_circle' width='700' height='440'> </canvas> ";
    $('.main-two').html(strtwo);
}
function func_three(){
    var strthree = "<div><span>磁盘使用情况</span></div>"+
        "<canvas id='canvas_cipan' width='700' height='440'> </canvas> "+
        "<script type='text/javascript' src='/static/js/cipan.js'></script>";
    $('.main-three').html();
}


function drawCircles(canvasId, data_arr, color_arr, text_arr)  {  
    var c = document.getElementById(canvasId);  
    var ctx = c.getContext("2d"); 
    c.height=c.height; 

    var radius = c.height / 2 - 20; //半径  
    var ox = radius + 20, oy = radius + 20; //圆心  

    var width = 50, height = 20; //图例宽和高  
    var posX = ox * 2 + 20, posY = c.height/2;   //  
    var textX = posX + width + 5, textY = posY + 10;  

    var startAngle = 0; //起始弧度  
    var endAngle = 0;   //结束弧度  
    for (var i = 0; i < data_arr.length; i++) {  
        //绘制饼图  
        endAngle = endAngle + data_arr[i]/100 * Math.PI * 2; //结束弧度  
        ctx.fillStyle = color_arr[i];  
        ctx.beginPath();  
        ctx.moveTo(ox, oy); //移动到到圆心  
        ctx.arc(ox, oy, radius, startAngle, endAngle, false);  
        ctx.closePath();  
        ctx.fill();  
        startAngle = endAngle; //设置起始弧度  

        //绘制比例图及文字  
        ctx.fillStyle = color_arr[i];  
        ctx.fillRect(posX, posY + 25 * i, width, height);  
        ctx.moveTo(posX, posY + 25 * i);  
        ctx.font = 'bold 14px 楷书';    //斜体 30像素 微软雅黑字体  
        ctx.fillStyle = color_arr[i]; //"#000000";  
        var percent = null;
        percent = text_arr[i] + "：" + data_arr[i] + "%";
        ctx.fillText(percent, textX, textY + 20 * i);  
    }  
} 

function inits(x,d_id) {  
    //绘制饼图  
    //比例数据和颜色
    var data_arr = [x,100-x];  
    var color_arr = ["RED","BLUE"];  
    var text_arr =[];
    if(d_id == 'canvas_circle'){
        text_arr = ["CPU使用率", "CPU剩余"];  
    }else{
        text_arr = ["RAM使用率", "RAM剩余"]; 
    }

    drawCircles(d_id, data_arr, color_arr, text_arr);
}

var ve=null;
var pr=null;
var vi=null;
function use_cpu(){
    ve=setInterval(function(){
        $.ajax({
            url: '/shuju',
            dataType: 'json',
            success: function(data) {
                 inits(data,'canvas_circle');
            }
        });
    },1000)
}

function use_cipan(){
    vi=setInterval(function(){
        $.ajax({
            url: '/shuju1',
            dataType: 'json',
            success: function(data) {

                inits(data,'canvas_cipan');
            }
        });
    },1000)
}
function func_main(cid){
    if(cid == '.main-six'){
        func_six();
    }
    if(cid == '.main-two'){
        clearInterval(ve);
        use_cpu();
    }
    else{
        clearInterval(ve);
    }
    if(cid == '.main-three'){
        clearInterval(vi);
        use_cipan();
    }
    else{
        clearInterval(vi);
    }
    if(cid == '.main-one'){  
        clearInterval(pr);
        pro();
    }
    else{
        clearInterval(pr);
    }
}



// check the double values from checkbox and inputbox
function check(){

  //复选框部分
   var i = 0;
   clearInterval(pr);
   pro();
   // gain the checkbox that has been selected ,then get that value attribute
   var ids = document.getElementsByName("chks");
   var numbers = ids.length;
   var temp ="";
   for(i=0;i<numbers;i++){
      if(ids[i].checked){ 
          temp += ids[i].value +",";
      }
    }

    // 输入框部分
    var entered_pid = document.getElementById('search');
    var var_pid= (entered_pid.value).split(' ');

    for(var j=0;j<var_pid.length;j++){
      if(isNaN(var_pid[j])){
          alert('只能输入ID或请用空格分隔!');
          entered_pid.value='';
          return;
      }
    }

    if(temp.length>0 || (entered_pid.value).length>0){
       return temp + var_pid;
     }else{
      alert("请选择至少一个!");
      return ;
    }
  }
$(function(){

  // $("input[type='checkbox']").click(function(){
  //       if($("input[type='checkbox']").is(':checked')){
  //               $(this).closest('tr').css('background', '#faa');

  //      }else{
  //           $("tbody > tr:odd").css({background: "#fff"});
  //           $("tbody > tr:even").css({background: "#ddd"});
         
  //      }
  //  });

  $('.btn').click(function(){
      var res={}
      res['pid']= check();
     
      if(res.pid){
      // debugger;
         $.ajax({
            url: GLOBAL.KILL_URL,
            type: "POST",
            data:res,
            dataType: "json",
            success: function (data) {}
            // error: function(data){}
        });
     } $('#search').val('')
    
  }); 
  
});

function stopcess(){

  // 取消选择之后继续更新
  clearInterval(pr);
  pro();
   for(var i in $('.chk')){
      if($('.chk')[i].checked == true)
        clearInterval(pr);
      else{
        continue;
      }
   }
}

function pro(){
    pr=setInterval(function(){
    $.ajax({
            url: GLOBAL.PROCESS_LIST,
            type: "POST",
            dataType: "json",
            success: function (data) {
                var info = "<table id='tab-stop'>";
                  for(var k in data){
                    info = info +"\
                      <tr>\
                          <td width='60'> \
                              <center> \
                                <input type='checkbox' name='chks' class='chk' onclick='stopcess()' value="+k+" />\
                              </center>\
                          </td>\
                          <td width='80px'> "+k+" </td>\
                          <td width='300px'> "+data[k][0]+" </td>\
                          <td width='100px'> "+data[k][1]+" </td>\
                          <td width='100px'> "+data[k][2]+"%</td>\
                      </tr>";
                  }
                  info = info + "</table>";

                $('#tab').html(info);
            }
  });

},1000);}

$(document).ready(function(){
    $('ul#ul_daohang li').click(function(){
        $(this).addClass('am-active').siblings().removeClass('am-active');
        var arrl = ['.main-one','.main-two','.main-three','.main-four','.main-five','.main-six'];
        for(var i in arrl){
            $(arrl[i]).css("display","none");
        }
        var cid='.'+$(this).attr('id');
        $(cid).css("display","inline");
        func_main(cid);
    });
    pro();
    $zhong = $('.main-five');
    $zhong.on('click','.btn-cha',function(){
        $(".zhong_xia").html('');
       var _data = {};
       _data['string'] = $(':text').val();
        $('#i-zhuan').addClass('am-icon-spinner am-icon-spin');
       $.ajax({
            url: GLOBAL.USER_FOLDER_LIST_URL,
            data: _data,
            dataType: 'json',
            success: function(datas) {
                // 显示数据
                var str = "";
                str = str+'<ul>';
                for(var s in datas)
                {
                 str = str+"<li>"+datas[s]+"</li>";
                }
                str = str+'</ul>';
                $(".zhong_xia").html(str);
                $('#i-zhuan').removeClass('am-icon-spinner am-icon-spin');
                $('.zhong_xia').css("border","1px solid gray");
                $('.zhong_xia').addClass("am-scrollable-vertical");
            }
       });
       
    });
    
    $zhong.on('click','.btn-cha-file-content',function(){
        $(".zhong_xia").html('');
       var _data = {};
       _data['string'] = $(':text').val();
       $('#i-zhuan').addClass('am-icon-spinner am-icon-spin');
       $.ajax({
         url: GLOBAL.USER_FOLDER,
            data: _data,
            dataType: 'json',
            success: function(datas) {
                // 显示数据
                var str = "查询时间过长。。。。。</br>这里暂时不做演示0.0</br>极速加载中。。。。。。";
                // str = str+'<ul>';
                // for(var s in datas)
                // {
                //  str = str+"<li>"+datas[s]+"</li>";
                // }
                // str = str+'</ul>';
                $(".zhong_xia").html(str);
            }
       });
       $('#i-zhuan').removeClass('am-icon-spinner am-icon-spin');
    })
});


